import React, { Component } from "react";
import MainLayout from "../../../component/mainLayout/mainLayout";
import "./BillRecord.scss";
import { ListView, Modal } from "antd-mobile";
import * as ReactDOM from "react-dom";
import { channelCode, InterfaceG } from "../../../config/Config";
import yhTools from "../../../tools/yh";
import zhuanchu from "@images/imageXHB/icon/zhuanchu.png";
import zhuanru from "@images/imageXHB/icon/zhuanru.png";
import iconEarnings from "@images/imageXHB/icon/icon_earnings_detial.png";
import ic_wh2 from "@images/imageXHB/guide/ic_wh2@2x.png";


class BillRecord extends Component {
	constructor(props, ...args) {
		super(props, ...args);

		const dataSource = new ListView.DataSource({
			rowHasChanged: (row1, row2) => row1 !== row2
		});
		this.state = {
			comeType: this.props.match.params.comeType,
			channelCode: channelCode,
			data: [],
			dataSource: dataSource,
			hasMore: false,
			isLoading: false,
			height: (document.documentElement.clientHeight * 3) / 4,
			loadStatus: "",
			tipsModal: false,
		};
		this.pageIndex = 1;
	}

	componentDidMount() {
		console.log(1, this.props.match.params.comeType);
		if (this.props.match.params.comeType === "1") {
			this.getTradeData();
		} else {
			this.getBillData();
		}
	}

	//获取账单明细
	getBillData() {
		console.log("加载更多111");
		const hei =
			document.documentElement.clientHeight -
			ReactDOM.findDOMNode(this.lv).parentNode.offsetTop;

		let objs = {
			url: InterfaceG.actTrsQry,
			params: {
				channelCode: channelCode,
				pageIndex: String(this.pageIndex++),
				pageSize: "20"
			}
		};
		console.log("加载更多22");
		this.setState({
			isLoading: true
		});
		yhTools.request(objs).then(res => {
			if (res.code === "0") {
				if (res.data.length > 0) {
					if (res.data.length < 20) {
						this.setState({
							hasMore: false,
							isLoading: false
						});
					} else {
						this.setState({
							hasMore: true,
							isLoading: false
						});
					}
					this.setState({
						data: this.state.data.concat(res.data),
						height: hei
					});
				} else {
					this.setState({
						hasMore: false,
						isLoading: false
					});
				}
			}
		});
	}
	//首页——交易明细
	getTradeData() {
		const hei =
			document.documentElement.clientHeight -
			ReactDOM.findDOMNode(this.lv).parentNode.offsetTop;

		let objs = {
			url: InterfaceG.financeTradeDetail,
			params: {
				channelCode: channelCode,
				pageIndex: String(this.pageIndex++),
				pageSize: "20"
			}
		};
		this.setState({
			isLoading: true
		});
		yhTools.request(objs).then(res => {
			if (res.code === "0") {
				if (res.data.details.length > 0) {
					let data = [...this.state.data];
					res.data.details.forEach(item => {
						data = data.concat(item.tradeDetail);
					});
					this.setState({
						data: data,
						height: hei
					});
				} else {
					this.setState({
						loadStatus: "2"
					});
				}
			}
			this.setState({
				isLoading: false,
				hasMore: false
			});
		});
	}
	onItemClick(obj) {
		// return;
		this.props.history.push({
			pathname: `/recordDetail/${this.state.comeType}`,
			state: obj
		});
	}

	onEndReached2 = () => {
		console.log("加载更多");
		if (this.state.isLoading || !this.state.hasMore) {
			return;
		}
		console.log("有更多");
		let objs = {
			url: InterfaceG.actTrsQry,
			params: {
				channelCode: this.state.channelCode,
				pageIndex: String(this.pageIndex++),
				pageSize: "20"
			}
		};
		this.setState({
			isLoading: true
		});
		yhTools.request(objs).then(res => {
			if (res.code === "0") {
				if (res.data.length > 0) {
					if (res.data.length < 20) {
						this.setState({
							hasMore: false,
							isLoading: false
						});
					} else {
						this.setState({
							hasMore: true,
							isLoading: false
						});
					}
					this.setState({
						data: this.state.data.concat(res.data)
					});
				} else {
					this.setState({
						hasMore: false,
						isLoading: false
					});
				}
			}
		});
	};
	onEndReached1 = () => {
		if (this.state.isLoading || (this.pageIndex === 1 && !this.state.hasMore)) {
			return;
		}
		this.setState({ isLoading: true });
		let objs = {
			url: InterfaceG.financeTradeDetail,
			params: {
				channelCode: channelCode,
				pageIndex: String(this.pageIndex++),
				pageSize: "20"
			}
		};
		this.setState({
			hasMore: true,
			isLoading: true
		});
		yhTools.request(objs).then(res => {
			console.log(JSON.stringify(res));
			if (res.code === "0") {
				if (res.data.details.length > 0) {
					let data = [...this.state.data];
					res.data.details.forEach(item => {
						data = data.concat(item.tradeDetail);
					});
					this.setState({
						data: data
					});
				}
				this.setState({
					hasMore: false,
					isLoading: false
				});
			}
		});
	};

	getText(key) {
		let obj = {
			0: "交易成功",
			1: "卖出",
			2: "收益"
		};
		return obj[key];
	}

	/**小辉宝交易明细 */
	row1 = rowData => {
		return (
			<div>
				<div
					onClick={() => this.onItemClick(rowData)}
					className="transaction_item"
				>
					<div className="transaction_item_content">
						<div className="transaction_item_content_left">
							{rowData.tradeType === "0" && (
								<img className="logo_img_type" src={zhuanru} alt="" />
							)}
							{rowData.tradeType === "1" && (
								<img className="logo_img_type" src={zhuanchu} alt="" />
							)}
							{rowData.tradeType === "2" && (
								<img className="logo_img_type" src={iconEarnings} alt="" />
							)}
							<div className="boxaa">
								<div className="transaction_item_content_top_left">
									{/* {item.tradeTypeLabel} */}
									小辉宝
								</div>
								<div className="transaction_item_content_bottom_left">
									{rowData.tradeTime}
								</div>
							</div>
						</div>
						<div className="transaction_item_content_right">
							<div className="transaction_item_content_top_right">
								{rowData.tradeType === "1" || rowData.tradeType === "3"
									? "-"
									: "+"}
								{rowData.tradeAmt}
							</div>
							<div className="transaction_item_content_bottom_right">
								交易成功
							</div>
						</div>
					</div>
				</div>
			</div>
		);
	};
	/**小辉贷、小辉宝账单记录 */
	row2 = (rowData, sectionID, rowID) => {
		return (
			<div>
				<div
					onClick={() => this.onItemClick(rowData)}
					key={rowID}
					className="bill_record_item"
				>
					<div className="bill_record_item_content">
						<div>
							<div className="bill_record_item_content_top_left">
								{rowData.tradeDesc}
							</div>
							<div className="bill_record_item_content_bottom_left">
								{rowData.tradeTime}
							</div>
						</div>
						<div className="bill_record_item_content_right">
							<div className="bill_record_item_content_top_right">
								{rowData.type == "1"
									? `${rowData.amount < 0
										? "+" + -rowData.amount
										: "-" + rowData.amount
									}`
									: `+${rowData.amount}`}
								{/* {rowData.amount} */}
							</div>
							<div className="bill_record_item_content_bottom_right">
								{this.getText(rowData.tradeStatus)}
							</div>
						</div>
					</div>
				</div>
			</div>
		);
	};

	handleSeeTips = () => {
		this.setState({ tipsModal: true });
	}

	//打电话
	handleCall = () => {
		let callPhoneData = {
			telphone: "4008219666"
		};
		yhTools.callPhone(callPhoneData);
	};

	render() {
		const _pageParams = {
			header: {
				title: `${this.state.comeType === "1" ? "交易明细" : "收支明细"}`,
				headerBackground: `${this.state.comeType === "1" ? "" : "#ffffff"}`,
				titleColor: `${this.state.comeType === "1" ? "" : "#302E2F"}`,
				newBackButt: this.state.comeType === "1" ? false : true,
				rightIcon: this.state.comeType === "1" ? null : ic_wh2,
				rightButtCallBack: this.handleSeeTips,
			},
			cacheLifecycles: this.props.cacheLifecycles,
			history: this.props.history,
			loadStatus: this.state.loadStatus
		};
		let { comeType } = this.state;
		return (
			<MainLayout pageParams={_pageParams}>
				<div className="billrecord">
					<ListView
						ref={el => (this.lv = el)}
						dataSource={this.state.dataSource.cloneWithRows(this.state.data)}
						renderFooter={() => (
							<div className="bill_record_listview_foot">
								{this.state.hasMore ? "加载中" : "没有更多了"}
							</div>
						)}
						renderRow={comeType === "2" ? this.row2 : this.row1}
						style={{
							height: this.state.height,
							overflow: "auto"
						}}
						initialListSize={20}
						onEndReached={
							comeType === "2" ? this.onEndReached2 : this.onEndReached1
						}
					/>
				</div>
				<Modal
					className="rule-modal"
					visible={this.state.tipsModal}
					transparent
					maskClosable={false}
					footer={[{ text: '知道了', onPress: () => { this.setState({ tipsModal: false }) } }]}
					onClose={() => { this.setState({ tipsModal: false }) }}
				>
					<p className="content">华通银行电子账户（Ⅱ类户）活余额派息规则：每自然季度派息一次，即3月、6月、9月、12月的21号进行派息。详情咨询华通银行联系电话：<span style={{ color: '#BC9A67' }} onClick={this.handleCall}>400-8219-666</span>。</p>
				</Modal>
			</MainLayout>
		);
	}
}

export default BillRecord;
